<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <div class="block-box">
                <!--筛选-->
                <div class="pick-box">
                    <div class="pick-chose white-color dark-background">
                        <template v-for="(item,index) in pickList">
                            <div :key="index"
                                 @click="pickClick(item,index)"
                                 :class=" index == pick_index?'active-pick background':''"
                            >{{item.name}}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="address-box">
                    <div class="address-info main-color big-font-size">
                        <div class="white-space">配送地址：</div>
                        <div @click="getAddressFun">{{addressList[address_index].address}}</div>
                        <img src="../../assets/img/arrowFlag.png" @click="getAddressFun">
                    </div>
                    <div class="small-font-size three-color order-delivery-people">{{addressList[address_index].name}}
                        {{addressList[address_index].phone}}
                    </div>
                    <div class="delivery-warehouse main-color big-font-size">
                        <div class="big-font-size">配送方式：</div>
                        <div class="font three-color" @click="getDeliveryFun">{{deliveryMode}}</div>
                        <img src="../../assets/img/arrowFlag.png" @click="getDeliveryFun">
                    </div>
                </div>
            </div>
            <div class="order-list block-box">
                <div class="three-color delivery-title">{{pick_index==0?'总部直供':'门店自采'}}</div>
                <div class="order-content-box"
                     v-for="(item,index) in shopCartArray"
                     :key="item.id"
                >
                    <img :src="item.imgUrl"/>
                    <div class="order-info-box">
                        <div class="main-color big-font-size">{{item.id}}--{{item.title}}</div>
                        <div class="three-color small-font-size">规格：</div>
                        <div class="three-color small-font-size">重量：</div>
                        <div class="three-color small-font-size">保存：</div>
                        <div class="second-color small-font-size">X 12 (4箱)</div>
                    </div>
                    <div class="second-color small-font-size goods-count">
                        <div class="">{{pick_index==1?'指导价：':''}}</div>
                        <div>￥<span class="big-font-size">6000</span></div>
                    </div>
                </div>
            </div>
            <div class="block-box mar">
                <div class="order-content-list-box">
                    <div v-if="pick_id==1">
                        <div class="content-item main-color">
                            <div>打包费</div>
                            <div class="three-color">￥12</div>
                        </div>
                        <div class="content-item main-color">
                            <div>配送费：</div>
                            <div class="three-color">￥900</div>
                        </div>
                    </div>
                    <div class="content-item main-color w100" @click="noteContentFun">
                        <div class="content-item main-color">
                            <div class="white-space">订单备注：</div>
                            <div class="arrow-box">
                                <div class="align-left three-color">{{orderNote}}</div>
                                <img src="../../assets/img/arrowFlag.png">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--底部按钮操作框-->
            <div class="bottom-content-box">
                <div class="bottom-content dark-background">
                    <div class="bottom-img-box">
                        <img src="../../assets/img/box.png">
                    </div>
                    <div class="bottom-price-box">
                        <div class="price">总计：￥200</div>
                        <div class="des light-color" v-if="pick_index==0">已优惠：￥20</div>
                    </div>
                    <div class="settle-accounts background"
                         @click="goSubmitFun"
                    >
                        {{pick_index==0?'立即支付':'提交'}}
                    </div>
                </div>
            </div>
        </div>
        <!--地址信息-->
        <mt-popup
                v-model="addressVisible"
                position="bottom"
                class="bottom-address-box"
        >
            <div class="popup-top-box">
                <div @click="cancelPopupFun">取消</div>
                <div @click="cancelPopupFun">确定</div>
            </div>
            <div class="popup-list-box">
                <div class="popup-list" v-for="(item,index) in addressList">
                    <div class="big-small-circular" :class="address_index==index?'background':''"
                         @click="choseAddressFun(item,index)"
                    >
                        <div class="small-circular" v-if="address_index==index"></div>
                    </div>
                    <div @click="choseAddressFun(item,index)">
                        <div class="main-color big-font-size">{{item.address}}</div>
                        <div class="three-color small-font-size">{{item.name}} {{item.phone}}</div>
                    </div>
                    <div class="green-color address-edit middle-font-size"
                         @click="goAddressFun(item.id)"
                    >编辑
                    </div>
                </div>
            </div>
            <div class="white-color address-add background"
                 @click="goAddressFun(0)"
            >新增地址
            </div>
        </mt-popup>
        <!--配送方式列表-->
        <mt-popup
                v-model="deliveryVisible"
                position="bottom"
                modal="true"
                class="bottom-delivery-box"
        >
            <div class="popup-top-box">
                <div @click="cancelPopupFun">取消</div>
                <div @click="cancelPopupFun">确定</div>
            </div>
            <div class="popup-list-box">
                <!--<div class="popup-list" v-for="(item,index) in addressList">-->
                <!--{{item.name}}-->
                <!--</div>-->
                <mt-picker :slots="deliveryList" @change="deliveryChange"></mt-picker>
            </div>
        </mt-popup>
        <!--支付弹框-->
        <div class="pay-box" v-if="payHidden==true">
            <div class="pay-close" @click="closePayFun">&times;</div>
            <div class="pay-title main-color">确认支付</div>
            <div class="main-color pay-price">￥3000</div>
            <!--<div class="pay-item">-->
            <!--<div class="second-color">支付方式：</div>-->
            <!--<div class="pay-arrow-box">-->
            <!--<div class="align-left three-color">货款支付(余额:￥5)</div>-->
            <!--<img src="../../assets/img/arrowFlag.png" class="arrow-img">-->
            <!--</div>-->
            <!--</div>-->
            <input v-model="pay_password" type="password" class="pay-all-price" placeholder="请输入支付密码">
            <mt-button class="background pay-button" @click="truePayFun">确认支付</mt-button>
        </div>
        <!--弹框背景-->
        <div class="backdrop" :class="payHidden==true?'display-block':''"></div>
    </div>
</template>

<script>
    import {MessageBox, Picker} from 'mint-ui';

    export default {
        name: "ShopSetOrder",
        data() {
            return {
                id: '',
                GetWindowBackground: {
                    'min-height': ''
                },
                pick_index: 0, //筛选的索引  1:总部直供  2：门店自采
                pick_id: 1, //筛选的id
                pickList: [{id: 1, name: '配送'}, {id: 2, name: '自提'}],
                addressVisible: false,//地址列表弹框是否显示
                deliveryVisible: false,//配送方式是否显示
                orderNote: '',//备注
                shopCartArray: [
                    {
                        id: 1,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }, {
                        id: 2,
                        title: "秘制小番茄500g",
                        spec: '500g/袋',
                        weight: '500g',
                        warehouse: '常温',
                        num: 0,
                        imgUrl:
                            "https://t00img-c.yangkeduo.com/goods/images/2020-08-13/ce99a1b2f665ba478d9573c314686c5d.jpeg"
                    }
                ],
                payHidden: false,//支付弹框 false:隐藏  true:显示
                pay_password: '',
                addressId: 1,//被选中地址的id
                address_index: 0,
                addressList: [
                    {
                        id: 1,
                        name: '张1',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 2,
                        name: '张2',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 3,
                        name: '张3',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 3,
                        name: '张4',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 4,
                        name: '张5',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 5,
                        name: '张三',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 6,
                        name: '张6',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }, {
                        id: 7,
                        name: '张三',
                        phone: '1522222222',
                        address: '天津市蓟县官庄镇东后子峪村'
                    }
                ],
                deliveryList: [
                    {
                        values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                    }
                ],
                deliveryMode: '暂无配送方式',
            }
        },
        mounted() {
            this.id = this.$route.query.id;
        },
        methods: {
            //获取地址列表
            getAddressFun() {
                this.addressVisible = true
                console.log('获取地址列表')
            },
            //配送方式列表
            getDeliveryFun() {
                this.deliveryVisible = true
                console.log('配送方式是否显示')
            },
            //选择类型
            pickClick: function (item, index) {
                this.pick_index = index;
                this.pick_id = item.id;
                // console.log(this.pick_index, index,this.pick_id)
            },
            //输入备注
            noteContentFun() {
                MessageBox.prompt('请输入备注', {inputValue: this.orderNote}).then(({value, action}) => {
                    this.orderNote = value
                }, () => {
                    console.log('取消');
                });
            },


            //提交
            goSubmitFun() {
                if (this.pick_index == 0) {
                    this.payHidden = true
                } else {
                    this.$router.push('/ShopOrderDetail')
                }
            },
            //确认支付
            truePayFun() {
                this.payHidden = false
                let password = this.pay_password
                console.log(password)
                this.$router.push('/ShopOrderDetail')
            },
            //关闭支付弹框
            closePayFun() {
                this.payHidden = false
            },
            //关闭底部弹框
            cancelPopupFun() {
                this.addressVisible = false
                this.deliveryVisible = false
            },
            //选地址
            choseAddressFun(item, index) {
                this.address_index = index
                this.addressId = item.id
                console.log(this.address_index, this.addressId)
            },
            //跳转地址页面
            goAddressFun(e) {
                var url = e == 0 ? '/address' : '/address?id=' + e
                this.$router.push(url)
            },
            //编辑地址
            editAddressFun(id) {
                this.$router.push('/address?id=' + id)
            },
            //选择配送方式
            deliveryChange(picker, values) {
                this.deliveryMode = values[0]
                // if (values[0] > values[1]) {
                //     picker.setSlotValue(1, values[0]);
                // }
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>

    .pick-box {
        width: 90%;
        height: 32px;
        display: flex;
        justify-content: center;
        font-size: 13px;
        margin: auto;
        position: relative;

        .pick-chose {
            width: 90%;
            padding: 2px;
            display: flex;
            align-items: center;
            border-radius: 20px;
        }
        .pick-chose div {
            width: 50%;
            height: 28px;
            line-height: 28px;
            border-radius: 20px;
        }
        .active-pick {
            width: 60px;
            color: #fff;
        }
    }

    .address-box {
        width: 100%;
        margin-top: 20px;
        .address-info {
            width: 100%;
            display: flex;
            text-align: left;
            align-items: center;

        }
        .order-delivery-people {
            width: calc(100% - 79px);
            line-height: 25px;
            padding: 0px 10px 0px 79px;
            text-align: left;
        }
        .delivery-warehouse {
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            margin-top: 20px;
            .font {
                font-size: 14px;
                width: calc(100% - 100px);
            }
        }
        img {
            width: 12px;
            height: 12px;
            margin-left: auto;
            margin-top: 2px;
        }
    }

    .order-list {
        display: flex;
        flex-direction: column;
    }

    .order-content-list-box {
        width: 100%;
    }

    .delivery-title {
        width: 100%;
        font-size: 14px;
        text-align: left;
        margin-bottom: 8px;
    }

    .order-content-box {
        width: 100%;
        display: flex;
        padding: 10px 0;
        img {
            width: 83px;
            height: 83px;
            margin-right: 10px;
            border-radius: 8px;
        }
        .order-info-box {
            /*width: calc(100% - 80px);*/
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
        }
        .goods-count {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }
    }

    .order-content-div {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-top: 1px dashed #D2D6DC;
        padding-top: 10px;
    }

    .content-item {
        width: 100%;
        min-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
    }

    .order-price-box {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        div {
            margin-left: 30px;
        }
    }

    .arrow-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
            width: 12px;
            height: 12px;
            padding-left: 3px;
            margin-top: 3px;
        }
    }

    .mar {
        margin: 10px auto 70px auto;
    }

    /*底部*/
    .bottom-content-box {
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 2;
        color: #fff;
        border: 10px solid #f5f6fa;
        .bottom-content {
            width: calc(100% - 20px);
            height: 45px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-radius: 8px;
            position: relative;
        }
        .settle-accounts {
            width: 82px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border-radius: 8px;
            margin-left: auto;
            margin-right: 6px;
            font-size: 15px;
            color: #fff;
        }
        .bottom-img-box {
            width: 35px;
            position: absolute;
            top: -9px;
            left: 10px;
            img {
                width: 100%;
            }
        }
        .bottom-price-box {
            display: flex;
            flex-direction: column;
            text-align: left;
            margin-left: 55px;
            .price {
                font-size: 14px;
                margin-right: auto;
            }
            .des {
                font-size: 10px;
            }
        }
    }

    /*地址*/
    .bottom-address-box {
        width: calc(100% - 40px);
        min-height: 80px;
        max-height: 380px;
        padding: 0 20px 60px 20px;
        .popup-top-box {
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            letter-spacing: 1px;
            font-size: 15px;
        }
        .popup-list-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            max-height: 305px;
            overflow-y: auto;
            margin-bottom: 60px;
            .popup-list {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                text-align: left;
                padding: 8px 0;
                .big-small-circular {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    border: 1px solid #05c569;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                    .small-circular {
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background: #fff;
                    }
                }
                .address-edit {
                    margin-left: auto;
                }
            }
        }
        .address-add {
            width: 60%;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            position: absolute;
            left: 20%;
            bottom: 20px;
        }
    }

    .bottom-delivery-box {
        width: calc(100% - 40px);
        min-height: 80px;
        max-height: 300px;
        padding: 0 20px 20px 20px;
        .popup-top-box {
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            letter-spacing: 1px;
            font-size: 15px;
        }
        .popup-list-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            max-height: 250px;
            overflow-y: auto;
            margin-bottom: 60px;
            .popup-list {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: left;
                padding: 8px 0;
                .big-small-circular {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    border: 1px solid #05c569;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                    .small-circular {
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background: #fff;
                    }
                }
                .address-edit {
                    margin-left: auto;
                }
            }
        }
        .address-add {
            width: 60%;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            position: absolute;
            left: 20%;
            bottom: 20px;
        }
    }


</style>